/* DigitalEDU Signup Styles - Baseado no template de login */

/* Reset global para eliminar margens brancas */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

* {
  box-sizing: border-box !important;
}

:root{
--brand-primary: #002b7a;   /* azul */
--brand-success: #009600;   /* verde */
--text-dark: #0A0A2E;
}

.digitaledu-signup-body, .digitaledu-signup-body * { 
  box-sizing: border-box; 
}

.digitaledu-signup-body{
margin-top: 0!important; 
margin-bottom: 0!important; 
min-height:100vh;
background:
  radial-gradient(1200px 600px at 50% -20%, rgba(0,0,0,0.18), transparent),
  linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-success) 100%);
display:flex; 
align-items:center; 
justify-content:center;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans', 'Helvetica Neue', sans-serif;
font: 12px;
color:#111827;
}

.digitaledu-signup-wrap{ 
  width:100%; 
  padding:12px; 
}

.digitaledu-signup-card{
max-width:520px; 
margin:0 auto; 
background:#fff; 
border-radius:16px;
box-shadow:0 25px 60px rgba(0,0,0,.22);
padding:13px 13px 11px;
}

.digitaledu-logo{ 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  margin-bottom:5px; 
}

.digitaledu-logo img{ 
  max-width:100px; 
  height:auto; 
}

.digitaledu-title{
text-align:center; 
margin:6px 0 6px; 
font-size:20px; 
color:#0b0b2e; 
font-weight:800;
}

.digitaledu-subtitle{
text-align:center; 
color:#4b5563; 
margin-bottom:5px;
margin-top:5px; 
font-size:13px; 
line-height:1.3;
}

/* ------ Alertas (erro vermelho, sucesso verde) ------ */
.digitaledu-alert{
padding:12px 14px; 
border-radius:10px; 
margin-bottom:14px; 
font-size:14px;
}

.digitaledu-alert.ok{    
  background:#ecfdf5; 
  color:#065f46; 
  border:1px solid #a7f3d0; 
}

.digitaledu-alert.error{ 
  background:#fef2f2; 
  color:#991b1b; 
  border:1px solid #fecaca; 
}

/* ------ Planos ------ */
.signup-plans {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 3px !important;
margin-bottom: 3px !important;
}

.plan-card {
background: white;
border: 2px solid #e5e7eb;
border-radius: 16px;
padding: 8px;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}

.plan-card:hover {
border-color: var(--brand-primary);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,43,122,.15);
}

.plan-card.selected {
border-color: var(--brand-primary);
background: linear-gradient(135deg, rgba(0,43,122,0.05) 0%, rgba(0,150,0,0.05) 100%);
}

.plan-card.free {
border-color: var(--brand-primary);
}

.plan-card.premium {
border-color: var(--brand-success);
position: relative;
}

.plan-card.premium::before {
content: "EM BREVE";
position: absolute;
top: -10px;
right: -10px;
background: var(--brand-success);
color: white;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
}

.plan-title {
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 4px;
margin-top: 4px;
color: var(--text-dark);
}

.plan-price {
font-size: 1.6rem;
font-weight: 900;
margin-bottom: 6px;
}

.plan-price.free {
color: var(--brand-primary);
}

.plan-price.premium {
color: var(--brand-success);
}

.plan-features {
list-style: none;
padding: 0;
margin: 0 0 8px 0;
}

.plan-features li {
padding: 3px 0;
color: #4b5563;
font-size: 13px;
}

.plan-features li::before {
content: "✓";
color: var(--brand-success);
font-weight: bold;
margin-right: 8px;
}

/* ------ Formulários ------ */
.digitaledu-form .field{ 
  margin-bottom:12px; 
}

.digitaledu-form label{
display:block; 
font-size:13px; 
margin-bottom:6px; 
color:#111827; 
font-weight:600;
}

.digitaledu-form input[type="text"],
.digitaledu-form input[type="email"],
.digitaledu-form input[type="password"]{
width:100%; 
border:1px solid #e5e7eb; 
border-radius:12px; 
padding:14px 14px;
font-size:15px; 
outline:none; 
transition:border-color .2s, box-shadow .2s; 
background:#fff;
}

.digitaledu-form input:focus{
border-color: var(--brand-primary);
box-shadow: 0 0 0 4px rgba(0,43,122,.12);
}

/* ------ Botões ------ */
.btn-primary{ /* AZUL - Cadastro gratuito */
width:100%; 
display:inline-flex; 
align-items:center; 
justify-content:center;
border:0; 
border-radius:14px; 
padding:10px 12px; 
font-size:14px; 
font-weight:800;
background: var(--brand-primary); 
color:#fff; 
cursor:pointer;
transition: transform .05s ease, filter .2s ease, box-shadow .2s;
box-shadow: 0 10px 24px rgba(0,43,122,.35);
}

.btn-primary:hover{ 
  filter: brightness(1.05); 
}

.btn-primary:active{ 
  transform: translateY(1px); 
}

.btn-success{ /* VERDE - Cadastro premium */
width:100%; 
display:inline-flex; 
align-items:center; 
justify-content:center;
border:0; 
border-radius:14px; 
padding:14px 18px; 
font-size:16px; 
font-weight:800;
background: var(--brand-success); 
color:#fff; 
cursor:pointer;
transition: transform .05s ease, filter .2s ease, box-shadow .2s;
box-shadow: 0 10px 24px rgba(0,150,0,.35);
}

.btn-success:hover{ 
  filter: brightness(1.05); 
}

.btn-success:active{ 
  transform: translateY(1px); 
}

.btn-success:disabled {
background: #9ca3af;
cursor: not-allowed;
box-shadow: none;
}

/* ------ Links ------ */
.links{ 
  margin-top:3px; 
  text-align:center; 
}

.links a{
color: var(--brand-primary);
text-decoration:none; 
font-weight:700; 
font-size:12px;
}

.links a:hover{ 
  text-decoration:underline; 
}

.hidden{ 
  display:none !important; 
}

hr.sep{ 
  border:none; 
  height:1px; 
  background:#eef2f7; 
  margin:5px 0; 
}

/* ------ Responsividade ------ */
@media (max-width: 420px){
.digitaledu-signup-card{ 
    padding:12px 12px 10px; 
    border-radius:14px; 
}

.digitaledu-signup-wrap{ 
  width:100%; 
  padding:12px; 
}

.digitaledu-logo img{ 
    max-width: 100px; 
}

.digitaledu-title {
  font-size: 20px;
  margin: 10px 0 4px;
}

.digitaledu-subtitle {
  font-size: 13px;
  margin-bottom: 12px;
}

.signup-plans {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.plan-card {
  padding: 5px;
}

.plan-title {
  font-size: 1.1rem;
  margin-bottom: 3px;
  margin-top: 3px;
}

.plan-price {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.plan-features {
  margin: 0 0 6px 0;
}

.plan-features li {
  padding: 2px 0;
  font-size: 12px;
}

.digitaledu-form .field {
  margin-bottom: 10px;
}
}